import { Link, Outlet } from "react-router-dom";
import styles from "../styles/header.module.css";
import Footer from "./Footer";
export default function MainPage({ basketData }) {
  return (
    <div style={{ minHeight: "100vh"}}>
      <div className={styles.wrapper}>
        <div className={styles.logo}>QPICK</div>
        <Link className={styles.h} to={"/fav"}>
          <svg
            width="63"
            height="60"
            viewBox="0 0 63 60"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M31.4867 21.6543C34.0706 19.3724 38.0635 19.4482 40.5528 21.901C43.0409 24.3549 43.1267 28.2629 40.8124 30.812L31.4845 40L22.1589 30.812C19.8446 28.2629 19.9315 24.3484 22.4185 21.901C24.91 19.4514 28.8952 19.3692 31.4867 21.6543ZM38.9952 23.4298C37.3452 21.8047 34.6833 21.7387 32.9563 23.2643L31.4878 24.5604L30.0183 23.2653C28.2858 21.7376 25.6294 21.8047 23.975 23.432C22.336 25.0441 22.2535 27.6245 23.7638 29.3297L31.4856 36.937L39.2075 29.3308C40.7189 27.6245 40.6364 25.0473 38.9952 23.4298Z"
              fill="#838383"
            />
          </svg>
          {basketData.length !== 0 ? (
            <div className={styles.circleH}>{basketData.length} </div>
          ) : null}
        </Link>
        <Link className={styles.basket} to="/neoflexTest/basket">
          <svg
            width="24"
            height="25"
            viewBox="0 0 24 25"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M4.08589 6.04602L0.48584 2.50535L2.05663 0.959991L5.65556 4.50175H22.5757C22.7487 4.50174 22.9193 4.54152 23.074 4.61792C23.2286 4.69431 23.3629 4.80521 23.4662 4.94176C23.5695 5.07831 23.639 5.23673 23.669 5.40438C23.699 5.57202 23.6888 5.74425 23.6391 5.90732L20.9749 14.6443C20.9064 14.8694 20.7659 15.0667 20.5743 15.207C20.3827 15.3473 20.1503 15.423 19.9114 15.423H6.30608V17.6072H18.5172V19.7915H5.19598C4.90157 19.7915 4.61921 19.6764 4.41103 19.4716C4.20284 19.2668 4.08589 18.989 4.08589 18.6994V6.04602ZM6.30608 6.686V13.2387H19.0855L21.0837 6.686H6.30608ZM5.75103 24.16C5.30941 24.16 4.88587 23.9874 4.5736 23.6802C4.26132 23.373 4.08589 22.9563 4.08589 22.5218C4.08589 22.0873 4.26132 21.6707 4.5736 21.3634C4.88587 21.0562 5.30941 20.8836 5.75103 20.8836C6.19266 20.8836 6.61619 21.0562 6.92847 21.3634C7.24074 21.6707 7.41618 22.0873 7.41618 22.5218C7.41618 22.9563 7.24074 23.373 6.92847 23.6802C6.61619 23.9874 6.19266 24.16 5.75103 24.16ZM19.0722 24.16C18.6306 24.16 18.207 23.9874 17.8948 23.6802C17.5825 23.373 17.4071 22.9563 17.4071 22.5218C17.4071 22.0873 17.5825 21.6707 17.8948 21.3634C18.207 21.0562 18.6306 20.8836 19.0722 20.8836C19.5138 20.8836 19.9374 21.0562 20.2496 21.3634C20.5619 21.6707 20.7373 22.0873 20.7373 22.5218C20.7373 22.9563 20.5619 23.373 20.2496 23.6802C19.9374 23.9874 19.5138 24.16 19.0722 24.16Z"
              fill="#838383"
            />
          </svg>
          {basketData.length !== 0 ? (
            <div className={styles.circle}>{basketData.length} </div>
          ) : null}
        </Link>
      </div>
      <Outlet />
      <Footer />
    </div>
  );
}
